<template>
  <div class="option-bar box1">
    <div class="item" @click="handleBtnClick">
      <cu-icon class="icon" type="org-zonglan_3d"></cu-icon>
      <div class="title">总览</div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "@vue/runtime-core";

export default defineComponent({
  name: "OptionBar",
  setup(props, { emit }) {
    const handleBtnClick = () => {
      emit("btnClick", { type: "overview" });
    };
    return {
      handleBtnClick,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../index.less";
.option-bar {
  position: fixed;
  right: 20px;
  top: 90px;
  padding: 10px;
  text-align: center;
  z-index: 100;
  .item {
    padding: 10px 0;
    width: 40px;
    cursor: pointer;
    &:hover {
      color: @mainColor;
    }
    .icon {
      font-size: 24px;
    }
    .title {
      font-size: 12px;
    }
  }
}
</style>
